<template>
  <div class='musicList'>
    <slot></slot>
    <div class="musicMsg">
      <div class="musicName" v-if="musicList&&musicList.song&&musicList.song.name">
        <h5 v-html="$options.filters.highLight(musicList.song.name,keywords)" v-if="keywords"></h5>
        <span v-else>{{musicList.song.name}}</span>
        <span style="color:gray" v-if="musicList.song.alia">({{musicList.song.alia}})</span>
      </div>
      <div v-if="musicList.song&&musicList.song.privilege.maxbr&&musicList.song.album&&musicList.song.album.name&&musicList.song.privilege&&musicList" class="autor" :class="{autor_bg:musicList.song.privilege.maxbr>320000}">
        {{musicList.song.artists[0].name}}-{{musicList.song.album.name}}
      </div>
    </div>

    <i class="iconfont icon players" @click.stop.prevent="toMv(musicList.song.mvid)" v-if="musicList.song.mvid&&musicList.song.mvid!=0">&#xe60e;</i>
    <i class="iconfont icon" v-else>&#xe624;</i>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    musicList: [Object, Array],
    keywords: ''
  },
  data() {
    return {};
  },
  watch: {},
  created() {},
  methods: {
    toMv(ids) {
      this.$store.commit('rotateing', false);
      this.$router.push({
        path: '/mv',
        query: {
          ids: ids
        }
      });
    }
  },
  filters: {
    highLight(value, keywords) {
      let reg = new RegExp(keywords, 'ig');
      return value.replace(reg, `<span style="color:red">${keywords}</span>  `);
    }
  }
};
</script>

<style lang="less" scoped>
.icon {
  content: '';
  width: 23px;
  height: 44px;
  position: absolute;
  right: 0;
  top: 10px;
}
.musicName {
  padding-bottom: 8px;
  width: 260px;
}
.musicList {
  padding-top: 10px;
  position: relative;
  display: flex;
  align-content: center;
  padding-bottom: 15px;
}
.musicMsg {
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.5px;
    width: 100%;
    box-shadow: 1px 1px 1px#ede5e5;
    // background-color: #ccc;
  }
}
.autor {
  position: relative;
  padding-left: 18px;
  color: #888;
  font-size: 12px;
  padding-bottom: 8px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.autor_bg {
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 10px;
    background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
    background-size: 180px;
  }
}
</style>